<template>
  <div class="theme-switch">
    <a-switch
      v-model:checked="checked"
      checked-children="暗"
      un-checked-children="亮"
      @change="onChange"
    />
  </div>
</template>
<script lang="ts" setup>
import { Switch as ASwitch, Button as AButton, ConfigProvider as AConfigProvider,theme } from "ant-design-vue";
import { ref ,defineEmits} from "vue";
const props = defineProps<{
  themeConfig?: any;
}>();
console.log('themeConfig',props.themeConfig);

const emit = defineEmits(["on-theme-change"]);

function switchTheme() {
  emit("on-theme-change", {
    token: {
      colorPrimary : props.themeConfig.token.colorPrimary === '#1677ff' ? '#deae03' : '#1677ff',
    }
    ,
    algorithm : props.themeConfig.algorithm === theme.defaultAlgorithm ? theme.darkAlgorithm : theme.defaultAlgorithm,
  });
}

const checked = ref(false);
const onChange = (c: any, e: Event) => {
    console.log(c);
  const transiton = document.startViewTransition(() => {
    document.documentElement.classList.toggle("dark");
    switchTheme()
  });
  transiton.ready.then(() => {
    const { clientX, clientY } = e;
    const radius = Math.hypot(
      Math.max(clientX, window.innerWidth - clientX),
      Math.max(clientY, window.innerHeight - clientY)
    );

    // const isDark = document.documentElement.classList.contains("dark");
    const isDark = !c;
    let pseudo;
    let clipPath;
    if (isDark) {
      pseudo = "::view-transition-new(root)";
      clipPath = [
        `circle(0px at ${clientX}px ${clientY}px)`,
        `circle(${radius}px at ${clientX}px ${clientY}px)`,
      ];
    } else {
      pseudo = "::view-transition-old(root)";
      clipPath = [
        `circle(${radius}px at ${clientX}px ${clientY}px)`,
        `circle(0px at ${clientX}px ${clientY}px)`,
      ];
    }

    document.documentElement.animate(
      {
        clipPath: clipPath,
      },
      {
        duration: 500,
        pseudoElement: pseudo,
      }
    );
  });
};
</script>
<style scoped lang="css"></style>
